
import React,{useState} from 'react'
import { ImageUploader } from 'antd-mobile'
import {dealImage, dataURLtoFile} from './util'



export default function ImageZip(){

  const [fileList, setList]  = useState([])
  const [image, setImage] = useState("")
  function setFileList(fileList){
    setList(fileList)
  }

  const upload= async (file)=>{
    const url = URL.createObjectURL(file)
    // 压缩图片
    const dataUrl = await dealImage(url)
    setImage(dataUrl)
    // 将base64转为file对象
    const newFile = dataURLtoFile(dataUrl,file.name)
    console.info('压缩比:',file.size, newFile.size)
    return {
      url: URL.createObjectURL(newFile),
    }
  }


  return (
    <div id="img">
      <ImageUploader value={fileList} onChange={setFileList}  upload={upload} />
      <img src={image} style={{width:600}}/>
    </div>
  )
}